<template>
  <div>
    <van-nav-bar
      title="购物车"
      left-text="返回"
      right-text="管理"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-swipe-cell v-for="i in shopDataList" :key="i.product.name">
      <van-card
        :num="i.amount"
        :tag="i + ''"
        :price="i.product.price"
        :title="i.product.name"
        :thumb="i.product.coverImage | filterImage"
      >
        <template #tag>
          <van-checkbox v-model="i.chk"> </van-checkbox>
        </template>
        <template #footer>
          <van-stepper
            v-model="i.amount"
            @plus="addAmount(i, 1)"
            @minus="addAmount(i, -1)"
          >
          </van-stepper>
        </template>
      </van-card>
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="del(i.id)"
        />
      </template>
    </van-swipe-cell>

    <van-submit-bar :price="sumPrice" button-text="结算" @submit="onSubmit()">
      <van-checkbox v-model="checkAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import {
  ShopCarDataAPI,
  AlertShopCarDataAPI,
  DeletShopCarDataAPI,
  SubmmitDataAPI,
} from '../service/product';

export default {
  name: 'VueYimutianShopCar',

  data() {
    return {
      shopNumber: 1,
      shopDataList: [],
      submitData: [],
      receiver: '钟白',
      address: '河南省许昌市',
    };
  },
  async created() {
    const res = await ShopCarDataAPI();
    this.shopDataList = res.data.data
      .filter((item) => item.product)
      .map((item) => ({ ...item, chk: false }));
    console.log(this.shopDataList);
  },
  methods: {
    async onSubmit() {
      const res = await SubmmitDataAPI({
        // 购买的商品信息，数据格式如下，一个商品信息组成的数组
        products: [
          {
            product: this.shopDataList.id,
            amount: this.shopDataList.amount,
          },
        ],
        receiver: this.receiver,
        address: this.address,
      });
      console.log(res);
      if (res.data.code === 1) {
        this.$router.push({
          name: 'WorkspaceJsonOrders',
        });
      }
    },
    onClickLeft() {
      this.$router.replace({
        name: 'VueYimutianList',
      });
    },
    onClickRight() {},
    async addAmount(i, amount) {
      await AlertShopCarDataAPI({
        product: i.product.id,
        amount,
        price: i.product.price,
      });
    },
    async del(id) {
      const res = await DeletShopCarDataAPI(id);
      this.shopDataList.splice(
        this.shopDataList.findIndex((item) => item.id === id),
        // eslint-disable-next-line comma-dangle
        1
      );
      console.log(res);
    },
  },
  computed: {
    checkAll: {
      set(v) {
        this.shopDataList.forEach((item) => {
          // eslint-disable-next-line no-param-reassign
          item.chk = v;
        });
      },
      get() {
        return this.shopDataList.every((item) => item.chk);
      },
    },
    sumPrice() {
      return (
        this.shopDataList
          .filter((item) => item.chk)
          .reduce((pre, cur) => pre + cur.amount * cur.product.price, 0) * 100
      );
    },
  },
};
</script>

<style scoped>
.delete-button {
  height: 100%;
  width: 80px;
}
</style>
